<template>
    <div class="assistant">
    	<p class="detailTop">
	    	<span class="topD">·</span>
	    	{{topText}}
	    	<span class="topD">·</span>
    	</p>
        <div class="reportFormBtn">
            <span @click="newFind" class="newFind">最新发现</span>
            <span @click="allFind">所有发现</span>
        </div>
        <div class="reportFormList">
            <ul>
                <li v-for="(item, index) in reportFormList" :key="index">
                    <div class="rfContent" @click="goDetailInfo(item.id,item.group_name)">
                        <p class="rfInfo">{{item.group_name}},{{item.sender}}对{{item.hit_words}}感兴趣</p>
                        <p>{{item.create_time | formatDate}}</p>
                        <span class="iconSpan">></span>
                    </div>
                </li>
                <li v-show="isReportFormList" class="noDataShow">暂无数据!</li>
            </ul>
        </div>
        <div class="kolBox">
        	<p class="kolTitle">KOL列表--过去一周</p>
        	<ul>
        		<li v-for = "(item,index) in kolList" :key='index'>
        			<div class="personKol">
        				<div class="leftInfo">
        					<img src="http://static.galileo.xiaojukeji.com/static/tms/default_header.png" alt="" />
        					<p>{{item.sender}}</p>
        				</div>
        				<p class="presonP">{{item.sender_count}}条发言</p>
        				<p class="presonP">{{item.hit_count}}条相关</p>
        				<p class="presonP">情绪指数{{item.hit_count}}</p>
        			</div>
        		</li>
        	</ul>
        	<p v-show="isKolList" class="noDataShow">暂无数据!</p>
        </div>
        <div class='myChart' id="myChart" v-show="isChartShow"></div>
        <div class="myChart2" id="myChart2" v-show='isChart2Show'></div>
    </div>
</template>
<script>
import request from "@/utils/request";
import axios from "axios";
import Cookies from "js-cookie";
import Qs from "qs";
require('echarts/extension/bmap/bmap');
export default {
    data(){
        return {
			openId: Cookies.get("openid"),
//openId: 'oj3y9wG78VUHc9lcn-f-nE60_NOM',
        	myChart: '',
        	myChart2: '',
        	isShow:[true, false, false, false],
        	hotData:'',
        	topText:this.$route.query.name,
			reportFormList:[],
			kolList:[],
			groupName:this.$route.query.name,
			isReportFormList:false,
			isChartShow:true,
			isChart2Show:true,
			isKolList:false
        }
    },
    filters: {
	    formatDate: function(value) {
	      let date = new Date(value);
	      let y = date.getFullYear();
	      let MM = date.getMonth() + 1;
	      MM = MM < 10 ? "0" + MM : MM;
	      let d = date.getDate();
	      d = d < 10 ? "0" + d : d;
	      let h = date.getHours();
	      h = h < 10 ? "0" + h : h;
	      let m = date.getMinutes();
	      m = m < 10 ? "0" + m : m;
	      let s = date.getSeconds();
	      s = s < 10 ? "0" + s : s;
//	      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
		  return y + "-" + MM + "-" + d + " " + h + ":" + m;
	    }
	},
    methods: {
    	//最新发现按钮
    	newFind(){
    		let _self = this;
    		console.log('最新发现');
    		_self.topText = _self.groupName;
    		_self.initFind()
    	},
    	//所有发现按钮
    	allFind(){
    		console.log('所有发现');
//  		      window.location.href = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+_self.registeroid;
//  		window.location.href = './groupAllFind'
    		this.$router.push({path:'/groupAllFind',query:{name:this.$route.query.name}})
    	},
    	//进入页面直接渲染最新发现信息
    	initFind(){
    		let _self = this;
    		let query = {
                openId: _self.openId,
                groupName:_self.groupName
            }
    		axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/messag/latestHitsByGroup/?${Qs.stringify(query)}`,{

            	}).then(response => {
				console.log(response.data.list)
				_self.reportFormList = response.data.list
				if(response.data.list.length<=0){
					_self.isReportFormList = true
				}else{
					_self.isReportFormList = false
				}
            })
    	},
//  	点击跳转
    	goDetailInfo(id,name){
    		this.$router.push({path:'/detailInfo',query:{id:id,name:name}})
    	},
		//kol数据获取
    	kolData(){
    		let _self = this;
    		let query = {
                openId: _self.openId,
//              groupName:'测试1',
				groupName:_self.groupName
            }
    		axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/messag/getKolByGroup/?${Qs.stringify(query)}`,{

            	}).then(response => {
				console.log(response.data.length)
				_self.kolList = response.data;
				if(response.data.length <= 0){
					_self.isKolList = true;
					_self.isChart2Show=false
				}
				
            })
    	},
    	//热力图   同PC端-数据洞察-客户洞察一个echatrs
    	getHotData(){
    		let _self = this;
    		    request
                    .get(_self.global.API_URL, {
                        action: "/gps/GPSReportAction/getGPSListPoint",
                        requestParam: {
                            productid: '61',
                            pageid:"",
                            stime:"",
                            etime:""
                        }
                    })
                    .then(response => {
                    	console.log(response.obj)
                    	_self.hotData = response.obj;
                    	_self.myChart2 = this.$echarts.init(document.getElementById('myChart2'));
        				_self.drawHot()
                    });
    	},
    	
        //热点分析/assistant/messag/lastWeekHots
        lastWeekHots(){
            let _self = this;
    		let query = {
                openId: _self.openId,
//              groupName:'测试1'
				groupName:_self.groupName
            }
            axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/messag/lastWeekHotsByGroup?${Qs.stringify(query)}`,{

            }).then(response => {
                if(response.data[0]){
                   _self.drawLine(response.data)
               }else{
                  console.log('暂无数据')
                  _self.isChartShow = false
               }
            })
        },

        //绘制图表
        drawLine(data){
            console.log(data)
            let dx = [];
            let dy = [];
            data.forEach( item => {
            	console.log(item.hit_words.length)
            	if(item.hit_words.length<=5){
            		dx.push(item.hit_words)	
            	}else{
            		dx.push(item.hit_words.slice(0,5)+'...');
            	}
                
                dy.push(item.hit_count);
            })
            let _self = this;
            let canvas = document.createElement('canvas');
            // let ctx = canvas.getContext('2d');
            canvas.width = 90;
            canvas.height = 100;
           _self.myChart.setOption({
               title: [{
                   text: '热点分析',
                   subtext: '总计',
                   x: '50%',
                   textAlign: 'center',
               }],
               grid: [{
                    top: 50,
                    width: '80%',
                    bottom: '10%',
                    left: 5,
                    containLabel: true
                }],
                xAxis: [{
                    type: 'value',
//                  max: 100,
                    splitLine: {
                        show: false
                    }
                    }],
                yAxis: [{
                    type: 'category',
                    data: dx,
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    },
                    splitLine: {
                        show: false
                    }
                }],
                series: [{
                    type: 'bar',
                    stack: 'chart',
                    z: 3,
                    label: {
                        normal: {
                            position: 'right',
                            show: true
                        }
                    },
                    data: dy
                }]
           })
        },
        //绘制热力图
        drawHot(){
        	let _self = this;
            let canvas = document.createElement('canvas');
            canvas.width = 90;
            canvas.height = 100;
           _self.myChart2.setOption({
                title: {
               		text: '热点洞察',
               		x: '50%',
               		textAlign: 'center',
           		},
        		animation: false,
		        bmap: {
		            // center: [120.13066322374, 30.240018034923],
		            center: [108.1, 33.2],
		            zoom: 5,
		            roam: true,
		            mapStyle: {
		                styleJson: [
		                    // 隐藏国道
		                    {
		                        "featureType": "highway",
		                        "elementType": "all",
		                        "stylers": {
		                            "color": "#00000000"
		                        }
		                    },
		                    //城市主干道隐藏
		                    {
		                        "featureType": "arterial",
		                        "elementType": "all",
		                        "stylers": {
		                            "color": "#cfe2f3ff"
		                        }
		                    }
		
		                ]
		            }
		        },
		        visualMap: {
		            show: true,
		            left: 'right',
		            top:'bottom',
		            min: 0,
		            calculable: true,
		            inRange: {
		                color: ['#24f5d8', '#e7b106', '#f55f24', '#FF753F', '#A8380C']
		            }
		        },
		        series: [{
		            type: 'heatmap',
		            coordinateSystem: 'bmap',
		            data:_self.hotData,
		            pointSize: 10,
		            blurSize: 2,
		            //颜色透明度，
		            minOpacity:0.4,
		            maxOpacity:0.7
		        }]
           })
                var bmap = _self.myChart2.getModel().getComponent('bmap').getBMap();
                var navigationControl = new window.BMap.NavigationControl({
                    // 靠左上角位置
                    anchor: window.BMAP_ANCHOR_TOP_LEFT,
                    // LARGE类型
                    type: window.BMAP_NAVIGATION_CONTROL_LARGE,
                    // 启用显示定位
                    enableGeolocation: true
                });
                bmap.addControl(navigationControl);
        		bmap.addControl(new window.BMap.MapTypeControl());
        }
    },
    mounted(){
        this.lastWeekHots()
        this.myChart = this.$echarts.init(document.getElementById('myChart'));
        
        this.initFind();
        this.kolData()
        this.getHotData()

    }
}
</script>
<style lang="stylus" scoped>
.assistant{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
}

.myChart{
    width:100%;
    height:4rem;
    margin-top: .5rem;
}
.myChart2{
    width:90%;
    height:4rem;
    margin:.5rem;
}
.detailTop {
  height: 1.08rem;
  line-height: 1.08rem;
  width: 100%;
  text-align: center;
  font-size: 0.3rem;
}
.topD{
	font-weight: bolder;
	font-size: .3rem;
	color: #f5ad49;
}
.reportFormBtn{
	height: .84rem;
	width: 100%;
	padding: .2rem 5%;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}
.reportFormBtn span{
	width: 1.8rem;
	height: .6rem;
	text-align: center;
	line-height: .6rem;
	background: #fdba47;
	/*font-size: .22rem;*/
	display: block;
	color: white;
	border-radius: .1rem;
}
.reportFormBtn span.newFind{
	background: #faf9f0;
	color: black;
}
.rfContent{
	width: 90%;
	margin: 0 auto;
	position: relative;
	margin-top: .2rem;
	border-bottom: 1px solid #CACACA;
}
.rfContent p{
	width: 80%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-size: .24rem;
	line-height: .4rem;
	color: #CACACA;
}
.rfContent p.rfInfo{
	color: #f4ac48;
}
.iconSpan{
	position: absolute;
	right: 0;
	top: .2rem;
	font-size: .4rem;
	color: #8d8d8d;
}
.kolBox{
	width: 90%;
	margin: 0 auto;
	margin-top: .5rem;
}
.kolTitle{
	font-weight: bold;
}
.personKol{
	display: flex;
	justify-content: space-around;
	width: 6.2rem;
	margin: 0 auto;
	margin-top: .4rem;
	font-size: .22rem;
	color: #767676;
}
.leftInfo{
	width: 1.5rem;
	text-align: center;
}
.leftInfo img{
	width: .66rem;
	height: .66rem;
	display: block;
	border-radius: 8px;
	margin: 0 auto;
}
.leftInfo p{
	margin-top: .2rem;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.presonP{
	line-height: .86rem;
}
.noDataShow{
	width: 100%;
	text-align: center;
	line-height: 1rem;
}
</style>


